<template>
  <div class="right-board">
    <el-tabs v-model="currentTab" class="center-tabs">
      <el-tab-pane label="组件属性" name="field" />
      <el-tab-pane label="组件样式" name="style" />
      <el-tab-pane label="表单属性" name="form" />
    </el-tabs>
    <div class="field-box">
      <el-scrollbar class="right-scrollbar">
        <!-- 组件属性 -->
        <el-form
          v-show="currentTab === 'field' && showField"
          size="small"
          label-width="90px"
          labelPosition="left"
        >
          <template v-if="activeData.__config__">
            <template v-if="$store.getters.hasTable">
              <template v-if="activeData.__config__.keyName === 'table'">
                <el-form-item
                  v-if="
                    activeData.__vModel__ !== undefined &&
                    !noVModelList.includes(activeData.__config__.keyName)
                  "
                  label="控件字段"
                >
                  <el-input
                    v-model="activeData.__vModel__"
                    placeholder="请输入控件字段(v-model)"
                    disabled
                  />
                </el-form-item>
              </template>
              <template v-else>
                <template v-if="!activeData.__config__.isSubTable">
                  <el-form-item
                    v-if="
                      activeData.__vModel__ !== undefined &&
                      !noVModelList.includes(activeData.__config__.keyName)
                    "
                    label="数据库表"
                  >
                    <el-select
                      v-model="activeData.__config__.tableName"
                      placeholder="请选择数据库表"
                      @change="tableChange"
                      filterable
                    >
                      <el-option
                        v-for="item in allTable"
                        :key="item.table"
                        :value="item.table"
                        :label="
                          item.tableName
                            ? item.table + '(' + item.tableName + ')'
                            : item.table
                        "
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item
                    v-if="
                      activeData.__vModel__ !== undefined &&
                      !noVModelList.includes(activeData.__config__.keyName)
                    "
                    label="控件字段"
                  >
                    <el-select
                      v-model="activeData.__vModel__"
                      placeholder="请选择控件字段(v-model)"
                      clearable
                      @change="fieldChange"
                      filterable
                    >
                      <el-option
                        v-for="item in fieldOptions"
                        :key="item.realField"
                        :value="item.realField"
                        :label="
                          item.fieldName
                            ? item.field + '(' + item.fieldName + ')'
                            : item.field
                        "
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </template>
                <template
                  v-if="activeData.__config__.isSubTable && subTable.length"
                >
                  <el-form-item
                    v-if="
                      activeData.__vModel__ !== undefined &&
                      !noVModelList.includes(activeData.__config__.keyName)
                    "
                    label="控件字段"
                  >
                    <el-select
                      v-model="activeData.__vModel__"
                      placeholder="请选择控件字段(v-model)"
                      clearable
                      @change="fieldChange1"
                      filterable
                    >
                      <el-option
                        v-for="item in getSubTableFiled(
                          activeData.__config__.relationTable
                        )"
                        :key="item.field"
                        :value="item.field"
                        :label="
                          item.fieldName
                            ? item.field + '(' + item.fieldName + ')'
                            : item.field
                        "
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </template>
              </template>
            </template>
            <template v-else>
              <el-form-item
                v-if="
                  activeData.__vModel__ !== undefined &&
                  !noVModelList.includes(activeData.__config__.keyName)
                "
                label="控件字段"
              >
                <el-input
                  v-model="activeData.__vModel__"
                  placeholder="请输入控件字段(v-model)"
                  disabled
                />
              </el-form-item>
            </template>
            <JNPFComInput
              v-if="activeData.__config__.keyName === 'comInput'"
              :active-data="activeData"
            />
            <JNPF-textarea
              v-if="activeData.__config__.keyName === 'textarea'"
              :active-data="activeData"
            />
            <JsbosText
              v-if="activeData.__config__.keyName === 'JsbosText'"
              :active-data="activeData"
            />
            <JNPFNumInput
              v-if="activeData.__config__.keyName === 'numInput'"
              :active-data="activeData"
            />
            <JNPFAmount
              v-if="activeData.__config__.keyName === 'JNPFAmount'"
              :active-data="activeData"
            />
            <JNPFPsdInput
              v-if="activeData.__config__.keyName === 'PsdInput'"
              :active-data="activeData"
            />
            <JNPFRadio
              v-if="activeData.__config__.keyName === 'radio'"
              :active-data="activeData"
            />
            <JNPFCheckbox
              v-if="activeData.__config__.keyName === 'checkbox'"
              :active-data="activeData"
            />
            <JNPFSelect
              v-if="activeData.__config__.keyName === 'select'"
              :active-data="activeData"
              :key="activeData.__config__.renderKey"
              :dictionaryOptions="dictionaryOptions"
              :dataInterfaceOptions="dataInterfaceOptions"
            />
            <JNPFCascader
              v-if="activeData.__config__.keyName === 'cascader'"
              :active-data="activeData"
            />
            <JNPFTime
              v-if="activeData.__config__.keyName === 'time'"
              :active-data="activeData"
            />
            <JNPFTimeRange
              v-if="activeData.__config__.keyName === 'timeRange'"
              :active-data="activeData"
            />
            <JNPFDate
              v-if="activeData.__config__.keyName === 'date'"
              :active-data="activeData"
            />
            <JNPFDateRange
              v-if="activeData.__config__.keyName === 'dateRange'"
              :active-data="activeData"
            />
            <JNPFColorPicker
              v-if="activeData.__config__.keyName === 'colorPicker'"
              :active-data="activeData"
            />
            <JNPFRate
              v-if="activeData.__config__.keyName === 'rate'"
              :active-data="activeData"
            />
            <JNPFSwitch
              v-if="activeData.__config__.keyName === 'switch'"
              :active-data="activeData"
            />
            <JNPFSlider
              v-if="activeData.__config__.keyName === 'slider'"
              :active-data="activeData"
            />
            <JNPFDivider
              v-if="activeData.__config__.keyName === 'divider'"
              :active-data="activeData"
            />
            <JNPFUploadFz
              v-if="activeData.__config__.keyName === 'uploadFz'"
              :active-data="activeData"
            />
            <JNPFUploadImg
              v-if="activeData.__config__.keyName === 'uploadImg'"
              :active-data="activeData"
            />
            <JNPFComRight v-if="isCommon" :active-data="activeData" />
            <JNPFAddress
              v-if="activeData.__config__.keyName === 'address'"
              :active-data="activeData"
            />
            <TreeSelect
              v-if="activeData.__config__.keyName === 'treeSelect'"
              :active-data="activeData"
            />
            <GroupTitle
              v-if="activeData.__config__.keyName === 'groupTitle'"
              :active-data="activeData"
            />
            <RelationForm
              v-if="activeData.__config__.keyName === 'relationForm'"
              :active-data="activeData"
              v-on="$listeners"
              :key="activeData.__config__.renderKey"
            />
            <RelationFormAttr
              v-if="activeData.__config__.keyName === 'relationFormAttr'"
              :active-data="activeData"
              ref="relationFormAttr"
            />
            <JNPFCalculate
              v-if="activeData.__config__.keyName === 'calculate'"
              :active-data="activeData"
              ref="calculate"
            />
            <PopupSelect
              v-if="activeData.__config__.keyName === 'popupSelect'"
              :active-data="activeData"
            />
            <PopupAttr
              v-if="activeData.__config__.keyName === 'popupAttr'"
              :active-data="activeData"
              ref="popupAttr"
            />
            <Tab
              v-if="activeData.__config__.keyName === 'tab'"
              :active-data="activeData"
            />
            <Collapse
              v-if="activeData.__config__.keyName === 'collapse'"
              :active-data="activeData"
            />
            <template v-if="activeData.__config__.keyName === 'barcode'">
              <el-form-item label="控件标题">
                <el-input
                  v-model="activeData.__config__.label"
                  placeholder="请输入控件标题"
                />
              </el-form-item>
              <el-form-item label="编码格式">
                <el-select v-model="activeData.format" placeholder="请选择">
                  <el-option
                    :label="item.label"
                    :value="item.value"
                    v-for="(item, i) in barcodeFormatOptions"
                    :key="i"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="条码颜色">
                <el-color-picker
                  v-model="activeData.lineColor"
                ></el-color-picker>
              </el-form-item>
              <el-form-item label="宽度">
                <el-input-number
                  v-model="activeData.width"
                  placeholder="宽度"
                  :min="0"
                  :precision="0"
                  controls-position="right"
                />
              </el-form-item>
              <el-form-item label="高度">
                <el-input-number
                  v-model="activeData.height"
                  placeholder="高度"
                  :min="0"
                  :precision="0"
                  controls-position="right"
                />
              </el-form-item>
              <el-form-item label="默认值">
                <el-select v-model="activeData.dataType" placeholder="请选择">
                  <el-option label="固定值" value="static"></el-option>
                  <el-option label="组件联动" value="relation"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item
                label="固定值"
                v-if="activeData.dataType === 'static'"
              >
                <el-input
                  v-model="activeData.staticText"
                  placeholder="请输入固定值"
                  @change="onBarcodeTextChange"
                />
              </el-form-item>
              <el-form-item
                label="选择组件"
                v-if="activeData.dataType === 'relation'"
              >
                <el-select
                  v-model="activeData.relationField"
                  placeholder="请选择"
                  clearable
                  filterable
                >
                  <el-option
                    :label="item.__config__.label"
                    :value="item.__vModel__"
                    v-for="(item, i) in drawingOptions"
                    :key="i"
                  ></el-option>
                </el-select>
              </el-form-item>
            </template>
            <template v-if="activeData.__config__.keyName === 'qrcode'">
              <el-form-item label="控件标题">
                <el-input
                  v-model="activeData.__config__.label"
                  placeholder="请输入控件标题"
                />
              </el-form-item>
              <el-form-item label="实点颜色">
                <el-color-picker
                  v-model="activeData.colorDark"
                ></el-color-picker>
              </el-form-item>
              <el-form-item label="尺寸">
                <el-input-number
                  v-model="activeData.size"
                  placeholder="尺寸"
                  :min="0"
                  :precision="0"
                  controls-position="right"
                />
              </el-form-item>
              <el-form-item label="默认值">
                <el-select v-model="activeData.dataType" placeholder="请选择">
                  <el-option label="固定值" value="static"></el-option>
                  <el-option label="组件联动" value="relation"></el-option>
                  <el-option label="当前表单路径" value="form"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item
                label="固定值"
                v-if="activeData.dataType === 'static'"
              >
                <el-input
                  v-model="activeData.staticText"
                  placeholder="请输入固定值"
                />
              </el-form-item>
              <el-form-item
                label="选择组件"
                v-if="activeData.dataType === 'relation'"
              >
                <el-select
                  v-model="activeData.relationField"
                  placeholder="请选择"
                  clearable
                  filterable
                >
                  <el-option
                    :label="item.__config__.label"
                    :value="item.__vModel__"
                    v-for="(item, i) in drawingOptions"
                    :key="i"
                  ></el-option>
                </el-select>
              </el-form-item>
            </template>
            <template v-if="activeData.__config__.keyName === 'button'">
              <el-form-item label="控件文本">
                <el-input
                  v-model="activeData.buttonText"
                  placeholder="请输入控件文本"
                />
              </el-form-item>
              <el-form-item label="位置">
                <el-radio-group v-model="activeData.align">
                  <el-radio-button label="left">居左</el-radio-button>
                  <el-radio-button label="center">居中</el-radio-button>
                  <el-radio-button label="right">居右</el-radio-button>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="样式">
                <el-select v-model="activeData.type" placeholder="请选择">
                  <el-option label="默认按钮" value=""></el-option>
                  <el-option label="主要按钮" value="primary"></el-option>
                  <el-option label="成功按钮" value="success"></el-option>
                  <el-option label="信息按钮" value="info"></el-option>
                  <el-option label="警告按钮" value="warning"></el-option>
                  <el-option label="危险按钮" value="danger"></el-option>
                </el-select>
              </el-form-item>
            </template>
            <template v-if="isSystem">
              <el-form-item label="控件标题">
                <el-input
                  v-model="activeData.__config__.label"
                  placeholder="请输入控件标题"
                />
              </el-form-item>
              <el-form-item
                label="选择模板"
                v-if="activeData.__config__.keyName === 'billRule'"
              >
                <BillRule
                  v-model="activeData.__config__.rule"
                  placeholder="选择模板"
                />
              </el-form-item>
              <el-form-item
                label="显示内容"
                v-if="activeData.__config__.keyName === 'currOrganize'"
              >
                <el-select
                  v-model="activeData.showLevel"
                  placeholder="请选择显示内容"
                >
                  <el-option label="显示组织" value="all"></el-option>
                  <el-option label="显示部门" value="last"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="是否隐藏">
                <el-switch v-model="activeData.__config__.noShow" />
              </el-form-item>
            </template>
            <template
              v-if="activeData.on && (modelType == 1 || modelType == 6)"
            >
              <el-divider>脚本事件</el-divider>
              <div v-for="(value, key) in activeData.on" :key="key">
                <el-form-item :label="key">
                  <el-button style="width: 100%" @click="editFunc(value, key)">
                    {{ getTipText(key) }}
                  </el-button>
                </el-form-item>
              </div>
            </template>

            <template v-if="activeData.__config__.keyName === 'table'">
              <el-form-item label="控件标题">
                <el-input
                  v-model="activeData.__config__.label"
                  placeholder="请输入控件标题"
                />
              </el-form-item>
              <el-form-item label="关联子表" v-if="$store.getters.hasTable">
                <el-select
                  v-model="activeData.__config__.tableName"
                  placeholder="请选择关联子表"
                  clearable
                  @change="onTableNameChange"
                >
                  <el-option
                    v-for="item in subTable"
                    :key="item.table"
                    :label="
                      item.tableName
                        ? item.table + '(' + item.tableName + ')'
                        : item.table
                    "
                    :value="item.table"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <table-config :active-data="activeData" />
            </template>

            <!-- 新增选时间组件 -->
            <template v-if="activeData.__config__.keyName === 'dailyTimers'">
              <el-form-item label="控件标题">
                <el-input
                  v-model="activeData.__config__.label"
                  placeholder="请输入控件标题"
                />
              </el-form-item>
              <!-- 格式暂未规定 -->
              <el-form-item label="年份/月份">
                <el-select
                  v-model="activeData.type"
                  placeholder="请选择"
                  @change="dataChange"
                >
                  <el-option
                    v-for="item in dataOptions"
                    :key="item.value"
                    :label="item.value"
                    :value="item.label"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="存储格式">
                <el-input
                  type="text"
                  v-model="activeData.format"
                  placeholder="timestamp戳/yyyy等格式"
                ></el-input>
              </el-form-item>
            </template>

            <template v-if="activeData.__config__.keyName === 'card'">
              <el-form-item label="卡片标题" label-width="76px">
                <el-input
                  v-model="activeData.header"
                  placeholder="请输入卡片标题"
                />
              </el-form-item>
              <el-form-item label="显示阴影" label-width="76px">
                <el-radio-group v-model="activeData.shadow" size="small">
                  <el-radio-button label="always">一直显示</el-radio-button>
                  <el-radio-button label="hover">移入显示</el-radio-button>
                  <el-radio-button label="never">永不显示</el-radio-button>
                </el-radio-group>
              </el-form-item>
            </template>
            <!-- row 布局 -->
            <template v-if="activeData.__config__.keyName === 'row'">
              <el-form-item
                v-if="activeData.__config__.componentName !== undefined"
                label="组件名"
              >
                {{ activeData.__config__.componentName }}
              </el-form-item>
            </template>
            <el-form-item
              v-if="
                activeData.__config__.layout === 'rowFormItem' &&
                activeData.gutter !== undefined
              "
              label="栅格间隔"
            >
              <el-input-number
                v-model="activeData.gutter"
                :min="0"
                placeholder="栅格间隔"
                controls-position="right"
              />
            </el-form-item>
          </template>
        </el-form>
        <!-- 组件样式 -->
        <el-form
          v-show="currentTab === 'style'"
          size="small"
          label-width="90px"
          labelPosition="left"
        >
          <template v-if="activeData.__config__">
            <template v-if="!activeData.__config__.isSubTable">
              <el-form-item label="控件栅格">
                <el-slider
                  v-model="activeData.__config__.span"
                  :max="24"
                  :min="6"
                  show-stops
                  :step="2"
                  show-tooltip
                />
              </el-form-item>
              <el-form-item
                label="标题宽度"
                v-if="
                  ![
                    'divider',
                    'JsbosText',
                    'button',
                    'table',
                    'groupTitle ',
                    'card',
                    'row',
                    'tab',
                    'collapse',
                  ].includes(activeData.__config__.keyName)
                "
              >
                <el-input-number
                  v-model="activeData.__config__.labelWidth"
                  placeholder="标题宽度"
                  :min="0"
                  :precision="0"
                  controls-position="right"
                />
              </el-form-item>
            </template>
            <el-form-item
              label="控件宽度"
              v-if="activeData.__config__.isSubTable"
            >
              <el-input-number
                v-model="activeData.__config__.columnWidth"
                placeholder="控件宽度"
                :min="0"
                :precision="0"
                controls-position="right"
              />
            </el-form-item>
            <el-form-item label="多端显示">
              <el-checkbox-group
                v-model="activeData.__config__.visibility"
                size="mini"
                class="visibility-checkbox"
              >
                <el-checkbox-button label="pc">PC</el-checkbox-button>
                <el-checkbox-button label="app">APP</el-checkbox-button>
              </el-checkbox-group>
            </el-form-item>
          </template>
        </el-form>
        <!-- 表单属性 -->
        <el-form
          v-show="currentTab === 'form'"
          size="small"
          label-width="100px"
          labelPosition="left"
        >
          <el-form-item label="表单尺寸">
            <el-radio-group v-model="formConf.size">
              <el-radio-button label="medium">中等</el-radio-button>
              <el-radio-button label="small">较小</el-radio-button>
              <el-radio-button label="mini">迷你</el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="标签对齐">
            <el-radio-group v-model="formConf.labelPosition">
              <el-radio-button label="left">左对齐</el-radio-button>
              <el-radio-button label="right">右对齐</el-radio-button>
              <el-radio-button
                label="top"
                :disabled="formConf.formStyle === 'word-form'"
                >顶部对齐
              </el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="标题宽度">
            <el-input-number
              v-model="formConf.labelWidth"
              :min="0"
              placeholder="标题宽度"
              controls-position="right"
            />
          </el-form-item>
          <el-form-item label="栅格间隔">
            <el-input-number
              v-model="formConf.gutter"
              :min="0"
              placeholder="栅格间隔"
              controls-position="right"
            />
          </el-form-item>
          <el-form-item
            label="弹窗类型"
            v-if="modelType != 3 && modelType != 6 && webType == 2"
          >
            <el-select v-model="formConf.popupType" placeholder="请选择">
              <el-option label="居中弹窗" value="general"></el-option>
              <el-option label="右侧弹窗" value="drawer"></el-option>
              <el-option label="全屏弹窗" value="fullScreen"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="表单样式" v-if="modelType != 3">
            <el-select v-model="formConf.formStyle" placeholder="请选择">
              <el-option label="默认风格" value=""></el-option>
              <el-option label="公文风格" value="word-form"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="表单宽度"
            v-if="formConf.popupType === 'general'"
          >
            <el-select v-model="formConf.generalWidth" placeholder="请选择">
              <el-option
                v-for="item in generalWidthOptions"
                :label="item"
                :value="item"
                :key="item"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            label="表单宽度"
            v-if="formConf.popupType === 'fullScreen'"
          >
            <el-select v-model="formConf.fullScreenWidth" placeholder="请选择">
              <el-option
                v-for="item in fullScreenWidthOptions"
                :label="item"
                :value="item"
                :key="item"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="表单宽度" v-if="formConf.popupType === 'drawer'">
            <el-select v-model="formConf.drawerWidth" placeholder="请选择">
              <el-option
                v-for="item in generalWidthOptions"
                :label="item"
                :value="item"
                :key="item"
              />
            </el-select>
          </el-form-item>
          <template v-if="modelType != 3 && modelType != 6 && webType != 3">
            <el-divider>表单按钮</el-divider>
            <div class="per-cell">
              <el-checkbox v-model="formConf.hasConfirmBtn" disabled
                >确定</el-checkbox
              >
              <el-input v-model="formConf.confirmButtonText" />
            </div>
            <div class="per-cell">
              <el-checkbox v-model="formConf.hasCancelBtn" disabled
                >取消</el-checkbox
              >
              <el-input v-model="formConf.cancelButtonText" />
            </div>
            <template v-if="webType == 2">
              <div class="per-cell" :class="{ last: !formConf.hasPrintBtn }">
                <el-checkbox v-model="formConf.hasPrintBtn">打印</el-checkbox>
                <el-input v-model="formConf.printButtonText" />
              </div>
              <el-form-item label="" v-if="formConf.hasPrintBtn">
                <JsbosTreeSelect
                  :options="printTplList"
                  v-model="formConf.printId"
                  placeholder="请选择打印模板"
                  lastLevel
                  clearable
                ></JsbosTreeSelect>
              </el-form-item>
            </template>
          </template>
          <template v-if="formConf.funcs && (modelType == 1 || modelType == 6)">
            <el-divider>脚本事件</el-divider>
            <el-form-item label="onLoad">
              <el-button
                style="width: 100%"
                @click="editFunc(formConf.funcs.onLoad, 'onLoad', true)"
                >表单加载触发
              </el-button>
            </el-form-item>
            <el-form-item label="beforeSubmit">
              <el-button
                style="width: 100%"
                @click="
                  editFunc(formConf.funcs.beforeSubmit, 'beforeSubmit', true)
                "
                >提交前置触发
              </el-button>
            </el-form-item>
            <el-form-item label="afterSubmit">
              <el-button
                style="width: 100%"
                @click="
                  editFunc(formConf.funcs.afterSubmit, 'afterSubmit', true)
                "
                >提交后置触发</el-button
              >
            </el-form-item>
          </template>
        </el-form>
      </el-scrollbar>
    </div>
    <form-script
      :visible.sync="formScriptVisible"
      :tpl="activeScript"
      :fields="drawingList"
      @updateScript="updateScript"
    />
  </div>
</template>

<script>
import { noVModelList } from "@/components/Generator/generator/comConfig";
import { isNumberStr } from "@/components/Generator/utils";
import { saveFormConf, getDrawingList } from "@/components/Generator/utils/db";
import { getDictionaryTypeSelector } from "@/api/systemData/dictionary";
import { getDataInterfaceSelector } from "@/api/systemData/dataInterface";
import FormScript from "./FormScript";
import JNPFComInput from "./RightComponents/ComInput";
import JNPFTextarea from "./RightComponents/Textarea";
import JsbosText from "./RightComponents/JsbosText";
import JNPFNumInput from "./RightComponents/NumInput";
import JNPFAmount from "./RightComponents/JNPFAmount";
import JNPFPsdInput from "./RightComponents/PsdInput";
import JNPFRadio from "./RightComponents/Radio";
import JNPFCheckbox from "./RightComponents/Checkbox";
import JNPFSelect from "./RightComponents/Select";
import JNPFCascader from "./RightComponents/Cascader/index";
import JNPFTime from "./RightComponents/Time";
import JNPFTimeRange from "./RightComponents/TimeRange";
import JNPFDate from "./RightComponents/Date";
import JNPFDateRange from "./RightComponents/DateRange";
import JNPFColorPicker from "./RightComponents/ColorPicker";
import JNPFRate from "./RightComponents/Rate";
import JNPFSwitch from "./RightComponents/Switch";
import JNPFSlider from "./RightComponents/Slider";
import JNPFDivider from "./RightComponents/Divider";
import JNPFUploadFz from "./RightComponents/UploadFz";
import JNPFUploadImg from "./RightComponents/UploadImg";
import JNPFComRight from "./RightComponents/ComRight";
import JNPFAddress from "./RightComponents/Address";
import TreeSelect from "./RightComponents/TreeSelect";
import GroupTitle from "./RightComponents/GroupTitle";
import RelationForm from "./RightComponents/RelationForm";
import RelationFormAttr from "./RightComponents/RelationFormAttr";
import JNPFCalculate from "./RightComponents/Calculate";
import PopupSelect from "./RightComponents/PopupSelect";
import PopupAttr from "./RightComponents/PopupAttr";
import Tab from "./RightComponents/Tab";
import Collapse from "./RightComponents/Collapse";
import TableConfig from "./RightComponents/table";

const commonRightList = [
  "comSelect",
  "depSelect",
  "posSelect",
  "userSelect",
  "dicSelect",
  "editor",
];
const systemList = [
  "createUser",
  "createTime",
  "modifyUser",
  "modifyTime",
  "currOrganize",
  "currDept",
  "currPosition",
  "billRule",
];

export default {
  components: {
    FormScript,
    JNPFComInput,
    JNPFTextarea,
    JsbosText,
    JNPFNumInput,
    JNPFAmount,
    JNPFPsdInput,
    JNPFRadio,
    JNPFCheckbox,
    JNPFSelect,
    JNPFCascader,
    JNPFTime,
    JNPFTimeRange,
    JNPFDate,
    JNPFDateRange,
    JNPFColorPicker,
    JNPFRate,
    JNPFSwitch,
    JNPFSlider,
    JNPFDivider,
    JNPFUploadFz,
    JNPFUploadImg,
    JNPFComRight,
    JNPFAddress,
    TreeSelect,
    GroupTitle,
    RelationForm,
    RelationFormAttr,
    JNPFCalculate,
    PopupSelect,
    PopupAttr,
    Tab,
    Collapse,
    TableConfig,
  },
  props: [
    "showField",
    "activeData",
    "formConf",
    "modelType",
    "webType",
    "drawingList",
  ],
  data() {
    return {
      currentTab: "field",
      currentNode: null,
      dialogVisible: false,
      iconsVisible: false,
      formScriptVisible: false,
      comScriptVisible: false,
      currentIconModel: null,
      activeScript: "",
      activeFunc: "",
      isConf: false,
      noVModelList,
      printTplList: [],
      fieldOptions: [],
      dictionaryOptions: [],
      dataInterfaceOptions: [],
      dataOptions: [
        {
          value: "选择年",
          label: "year",
        },
        {
          value: "选择月",
          label: "month",
        },
        {
          value: "选项年月日",
          label: "date",
        },
        {
          value: "选择多个日期",
          label: "dates",
        },
        {
          value: "年月日时分秒",
          label: "datetime",
        },
        {
          value: "年月范围",
          label: "monthrange",
        },
        {
          value: "年月日范围",
          label: "daterange",
        },
        {
          value: "年月日时分秒范围",
          label: "datetimerange",
        },
      ],
      justifyOptions: [
        {
          label: "start",
          value: "start",
        },
        {
          label: "end",
          value: "end",
        },
        {
          label: "center",
          value: "center",
        },
        {
          label: "space-around",
          value: "space-around",
        },
        {
          label: "space-between",
          value: "space-between",
        },
      ],
      barcodeFormatOptions: [
        {
          label: "code128",
          value: "code128",
        },
        {
          label: "ean13",
          value: "ean13",
        },
        {
          label: "ean8",
          value: "ean8",
        },
        {
          label: "ean5",
          value: "ean5",
        },
        {
          label: "ean2",
          value: "ean2",
        },
        {
          label: "code39",
          value: "code39",
        },
        {
          label: "itf14",
          value: "itf14",
        },
        {
          label: "msi10",
          value: "msi10",
        },
        {
          label: "msi11",
          value: "msi11",
        },
        {
          label: "pharmacode",
          value: "pharmacode",
        },
        {
          label: "upc",
          value: "upc",
        },
        {
          label: "codabar",
          value: "codabar",
        },
      ],
      generalWidthOptions: [
        "600px",
        "800px",
        "1000px",
        "40%",
        "50%",
        "60%",
        "70%",
        "80%",
      ],
      fullScreenWidthOptions: [
        "800px",
        "1000px",
        "1200px",
        "1400px",
        "50%",
        "60%",
        "70%",
        "80%",
        "90%",
        "100%",
      ],
      layoutTreeProps: {
        label(data, node) {
          const config = data.__config__;
          return data.componentName || `${config.label}: ${data.__vModel__}`;
        },
      },
    };
  },
  computed: {
    activeTag() {
      return this.activeData.__config__.tag;
    },
    formItemList() {
      return this.$store.state.generator.formItemList;
    },
    subTable() {
      return this.$store.state.generator.subTable || [];
    },
    allTable() {
      return this.$store.state.generator.allTable || [];
    },
    mainTable() {
      let allTable = this.$store.state.generator.allTable;
      let item = allTable.filter((o) => o.typeId == "1")[0];
      if (!item || !item.table) return "";
      return item.table;
    },
    isCommon() {
      return commonRightList.indexOf(this.activeData.__config__.keyName) > -1;
    },
    isSystem() {
      return systemList.indexOf(this.activeData.__config__.keyName) > -1;
    },
    drawingOptions() {
      let list = [];
      const loop = (data, parent) => {
        if (!data) return;
        if (
          data.__config__ &&
          data.__config__.keyName !== "table" &&
          data.__config__.children &&
          Array.isArray(data.__config__.children)
        ) {
          loop(data.__config__.children, data);
        }
        if (Array.isArray(data)) data.forEach((d) => loop(d, parent));
        if (data.__vModel__ && data.__config__.keyName !== "table") {
          list.push(data);
        }
      };
      loop(this.drawingList);
      return list;
    },
  },
  watch: {
    formConf: {
      handler(val) {
        // saveFormConf(val)
        if (val.formStyle === "word-form" && val.labelPosition === "top") {
          val.labelPosition = "left";
        }
      },
      deep: true,
    },
    activeData(val) {
      if (val.__config__.keyName === "relationFormAttr") {
        this.$nextTick(() => {
          this.$refs.relationFormAttr &&
            this.$refs.relationFormAttr.getOptions();
        });
      }
      if (val.__config__.keyName === "popupAttr") {
        this.$nextTick(() => {
          this.$refs.popupAttr && this.$refs.popupAttr.getOptions();
        });
      }
      if (val.__config__.keyName !== "calculate") {
        this.$nextTick(() => {
          this.$refs.calculate && this.$refs.calculate.reloadExpressionTemp();
        });
      }
      if (!val.__config__.tableName && val.__config__.keyName !== "table") {
        val.__config__.tableName = this.mainTable;
      }
      if (!this.activeData.__config__.visibility)
        this.$set(this.activeData.__config__, "visibility", ["pc", "app"]);
      this.setDefaultOptions();
    },
  },
  created() {
    this.getDictionaryType();
    this.getDataInterfaceSelector();
    this.getPrintTplList();
    if (!this.activeData || !this.activeData.__config__) return;
    if (!this.activeData.__config__.visibility)
      this.$set(this.activeData.__config__, "visibility", ["pc", "app"]);
    if (
      !this.activeData.__config__.tableName &&
      this.activeData.__config__.keyName !== "table"
    ) {
      this.activeData.__config__.tableName = this.mainTable;
    }
    this.setDefaultOptions();
  },
  methods: {
    addReg() {
      this.activeData.__config__.regList.push({
        pattern: "",
        message: "",
      });
    },
    setDefaultValue(val) {
      if (Array.isArray(val)) {
        return val.join(",");
      }
      // if (['string', 'number'].indexOf(typeof val) > -1) {
      //   return val
      // }
      if (typeof val === "boolean") {
        return `${val}`;
      }
      return val;
    },
    onDefaultValueInput(str) {
      if (Array.isArray(this.activeData.__config__.defaultValue)) {
        // 数组
        this.$set(
          this.activeData.__config__,
          "defaultValue",
          str.split(",").map((val) => (isNumberStr(val) ? +val : val))
        );
      } else if (["true", "false"].indexOf(str) > -1) {
        // 布尔
        this.$set(this.activeData.__config__, "defaultValue", JSON.parse(str));
      } else {
        // 字符串和数字
        this.$set(
          this.activeData.__config__,
          "defaultValue",
          isNumberStr(str) ? +str : str
        );
      }
    },
    getSubTableFiled(key) {
      let item = {};
      let list = this.subTable.filter((o) => o.table === key);
      if (list.length) {
        item = list[0];
      }
      let arr = [];
      if (item && item.fields)
        arr = item.fields.filter((o) => o.primaryKey != 1);
      return arr;
    },
    fieldChange1(val) {
      if (!val) return;
      const drawingList = getDrawingList() || [];
      let boo = false;
      const loop = (list) => {
        for (let i = 0; i < list.length; i++) {
          const e = list[i];
          const config = e.__config__;
          if (
            config.keyName === "table" &&
            config.tableName === this.activeData.__config__.relationTable
          ) {
            for (let j = 0; j < config.children.length; j++) {
              const child = config.children[j];
              if (child.__vModel__ === val) {
                boo = true;
                break;
              }
            }
          }
          if (
            config &&
            config.keyName != "table" &&
            config.children &&
            Array.isArray(config.children)
          ) {
            loop(config.children);
          }
        }
      };
      loop(drawingList);
      if (boo) {
        this.$message.warning(`子表字段【${val}】已存在,请重新选择!`);
        this.activeData.__vModel__ = "";
        return;
      }
      let options = this.getSubTableFiled(
        this.activeData.__config__.relationTable
      );
      let item = options.filter((o) => o.field == val)[0];
      if (!item || !item.fieldName) return;
      this.activeData.__config__.label = item.fieldName;
    },
    fieldChange(val) {
      if (!val) return;
      const drawingList = getDrawingList() || [];
      let boo = false;
      const loop = (list) => {
        for (let i = 0; i < list.length; i++) {
          const e = list[i];
          const config = e.__config__;
          if (e.__vModel__ === val) {
            boo = true;
            break;
          }
          if (
            config &&
            config.keyName != "table" &&
            config.children &&
            Array.isArray(config.children)
          ) {
            loop(config.children);
          }
        }
      };
      loop(drawingList);
      if (boo) {
        this.$message.warning(`字段【${val}】已存在,请重新选择!`);
        this.activeData.__vModel__ = "";
        return;
      }
      let item = this.fieldOptions.filter((o) => o.realField == val)[0];
      if (!item || !item.fieldName) return;
      this.activeData.__config__.label = item.fieldName;
    },
    tableChange() {
      this.activeData.__vModel__ = "";
      this.setDefaultOptions();
    },
    setDefaultOptions() {
      if (!this.$store.getters.hasTable) return;
      if (
        this.activeData.__vModel__ === undefined ||
        this.activeData.__config__.keyName === "table"
      )
        return;
      if (
        !this.activeData.__config__.tableName ||
        this.activeData.__config__.tableName === this.mainTable
      ) {
        let fieldOptions = this.formItemList.map((o) => ({
          ...o,
          realField: o.field,
        }));
        this.fieldOptions = fieldOptions.filter((o) => o.primaryKey != 1);
      } else {
        let list = this.allTable.filter(
          (o) => o.table === this.activeData.__config__.tableName
        );
        if (!list.length) {
          this.activeData.__config__.tableName = this.mainTable;
          let fieldOptions = this.formItemList.map((o) => ({
            ...o,
            realField: o.field,
          }));
          this.fieldOptions = fieldOptions.filter((o) => o.primaryKey != 1);
          this.activeData.__vModel__ = "";
        } else {
          let item = list[0];
          let options = item.fields.map((o) => ({
            ...o,
            realField:
              "jnpf_" +
              this.activeData.__config__.tableName +
              "_jnpf_" +
              o.field,
          }));
          this.fieldOptions = options.filter((o) => o.primaryKey != 1);
        }
      }
    },
    spanChange(val) {
      this.formConf.span = val;
    },
    onTableNameChange(tableName) {
      if (!tableName) return;
      const drawingList = getDrawingList() || [];
      let boo = false;
      const loop = (list) => {
        for (let i = 0; i < list.length; i++) {
          const e = list[i];
          const config = e.__config__;
          if (config.keyName === "table" && config.tableName === tableName) {
            boo = true;
            break;
          }
          if (
            config &&
            config.keyName != "table" &&
            config.children &&
            Array.isArray(config.children)
          ) {
            loop(config.children);
          }
        }
      };
      loop(drawingList);
      if (boo) {
        this.$message.warning(`子表【${tableName}】已存在,请重新选择!`);
        this.activeData.__config__.tableName = "";
        return;
      }
      for (let i = 0; i < this.activeData.__config__.children.length; i++) {
        this.$set(
          this.activeData.__config__.children[i].__config__,
          "relationTable",
          tableName
        );
        this.$set(this.activeData.__config__.children[i], "__vModel__", "");
      }
    },
    getDictionaryType() {
      getDictionaryTypeSelector().then((res) => {
        this.dictionaryOptions = res.data.list;
      });
    },
    getDataInterfaceSelector() {
      getDataInterfaceSelector().then((res) => {
        this.dataInterfaceOptions = res.data;
      });
    },
    getPrintTplList() {
      this.$store.dispatch("base/getPrintFormTree").then((res) => {
        let list = res.filter((o) => o.children && o.children.length);
        this.printTplList = list.map((o) => ({
          ...o,
          hasChildren: true,
        }));
      });
    },
    dataChange(e) {
      console.log("选择", e);
      if (e == "year") {
        this.activeData.format = "yyyy";
      }
      switch (e) {
        case "year":
          this.activeData.format = "yyyy";
          break;
        case "month":
          this.activeData.format = "yyyy-MM";
          break;
        case "date":
          this.activeData.format = "timestamp";
          break;
        case "date":
          this.activeData.format = "yyyy-MM-dd";
          break;
        case "datetime":
          this.activeData.format = "timestamp";
          break;
        case "monthrange":
          this.activeData.format = "yyyy-MM";
          break;
        case "daterange":
          this.activeData.format = "yyyy-MM-dd";
          break;
        case "datetimerange":
          this.activeData.format = "timestamp";
          break;
        default:
          默认代码块;
      }
    },
    getTipText(key) {
      let text = "";
      switch (key) {
        case "change":
          text = "发生变化时触发";
          break;
        case "blur":
          text = "失去焦点时触发";
          break;
        case "click":
          text = "点击时触发";
          break;
        case "tab-click":
          text = "面板点击时触发";
          break;
        default:
          text = "";
          break;
      }
      return text;
    },
    updateScript(data) {
      if (this.isConf) {
        this.formConf.funcs[this.activeFunc] = data;
      } else {
        this.activeData.on[this.activeFunc] = data;
      }
    },
    editFunc(str, funcName, isConf) {
      this.activeScript = str;
      this.activeFunc = funcName;
      this.isConf = isConf || false;
      this.formScriptVisible = true;
    },
    onBarcodeTextChange(val) {
      if (!val) return;
      let reg = /^[A-Za-z0-9]+$/;
      if (!reg.test(val)) {
        this.$message({
          message: "固定值请输入数字或者英文字母",
          type: "error",
          duration: 1500,
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.right-board {
  width: 340px;
  position: absolute;
  right: 0;
  top: 0;
  padding-top: 3px;
  height: 100%;
  background: #fff;
  border-radius: 4px;
  .field-box {
    position: relative;
    height: calc(100% - 42px);
    box-sizing: border-box;
    overflow: hidden;
  }
  .el-scrollbar {
    height: 100%;
  }
}
>>> .select-item,
.select-item {
  display: flex;
  border: 1px dashed #fff;
  box-sizing: border-box;
  & .el-input + .el-input {
    margin-left: 4px;
  }
  & + .select-item {
    margin-top: 4px;
  }
  &.sortable-chosen {
    border: 1px dashed #409eff;
  }
  .select-line-icon {
    line-height: 32px;
    font-size: 22px;
    padding: 0 4px;
    color: #606266;
    .icon-ym-darg {
      font-size: 20px;
      line-height: 31px;
      display: inline-block;
    }
  }
  .close-btn {
    cursor: pointer;
    color: #f56c6c;
  }
  .option-drag {
    cursor: move;
  }
}
.time-range {
  .el-date-editor {
    width: 227px;
  }
  ::v-deep .el-icon-time {
    display: none;
  }
}
.document-link {
  position: absolute;
  display: block;
  width: 26px;
  height: 26px;
  top: 0;
  left: 0;
  cursor: pointer;
  background: #409eff;
  z-index: 1;
  border-radius: 0 0 6px 0;
  text-align: center;
  line-height: 26px;
  color: #fff;
  font-size: 18px;
}
.node-label {
  font-size: 14px;
}
.node-icon {
  color: #bebfc3;
}
.right-scrollbar {
  .el-form {
    >>> .el-date-editor,
    >>> .el-cascader,
    >>> .el-select {
      width: 100%;
    }
  }
}
.per-cell {
  display: flex;
  align-items: center;
  margin-bottom: 18px;
  .el-checkbox {
    width: 146px;
  }
  &.last {
    margin-bottom: 0;
  }
}
.visibility-checkbox {
  width: 100%;
  >>> .el-checkbox-button {
    width: 50%;
    .el-checkbox-button__inner {
      width: 100%;
      text-align: center;
    }
  }
}
</style>
